<template>
	<uni-popup ref="Compopup" type="bottom" :maskClick="false" @change="OnPopupChange">
		<view class="picker_bos">
			<view class="title flex-row-between">
				<view class="title_qx" @click="Oncancel">取消</view>
				<view class="title_xz">{{title}}</view>
				<view class="title_qd" @click="Onsure">确定</view>
			</view>
			<view class="picker_box" v-if="pickerif">
				<picker-view :value="selectedIndex" @change="OnPickerChange" class="picker-view w100 h100">
					<picker-view-column>
						<view class="picker_item w100 flex-row-center ellipsis" v-for="(item,index) in dataList" :key="index">{{item[mode]}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			title: { // 弹窗标题
				type: String,
				default: ''
			},
			mode: { // 显示的类目对应的键值，比如name,value等
				type: String,
				default: 'name'
			},
		},
		data() {
			return {
				pickerif: false, //异步
				dataList: [], // 列表数据
				defaultIndex: 0, // 默认高亮的下标
				selectedIndex: [], //选中的下标
			};
		},
		methods: {
			// 获取数据
			Ondata(data, defaultIndex) {
				this.dataList = data
				this.defaultIndex = defaultIndex
				this.Onutil()
			},
			// 打开
			Onopen() {
				this.$refs.Compopup.open()
			},
			// 取消
			Oncancel() {
				this.Onutil()
				this.$refs.Compopup.close()
			},
			// 确定
			Onsure() {
				this.$refs.Compopup.close()
				this.defaultIndex = this.selectedIndex
				this.$emit('callback', this.dataList[this.selectedIndex])
			},
			// 弹出层状态发生变化时触发
			OnPopupChange(e) {
				if (!e.show) {
					this.Onutil()
				}
			},
			// 当滚动选择，value 改变时触发 change 事件
			OnPickerChange(e) {
				this.selectedIndex = e.detail.value
			},
			// 更新数据
			Onutil() {
				if (this.defaultIndex == 0) {
					this.selectedIndex = [0]
				} else {
					this.dataList.forEach((item, index) => {
						if (index == this.defaultIndex) {
							this.selectedIndex = [index]
						}
					})
				}
				this.pickerif = true
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '@/common/css/variables.less';
	.picker_bos {
		width: 750rpx;height: 600rpx; background-color: #fff;border-radius: 10rpx 10rpx 0 0;overflow: hidden;
		.title {
			height: 80rpx;padding: 0 60rpx;border-bottom: 2rpx solid #f5f5f5;font-size: 30rpx;
			.title_qx { color: #969696; }
			.title_qd { color: @theme-color; }
		}
		.picker_box {
			width: 750rpx;height: calc(100% - 80rpx);
			.picker_item {font-size: 30rpx;color: #323232;}
		}
	}
</style>
